<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>滚动</title>
    <a href="./作业2.html"></a>
    <a href="./作业3.html"></a>

    <style type="text/css">
        body,
        ul,
        li {
            margin: 0px;
            padding: 0px;
        }
        
        ul,
        li {
            list-style: none;
            text-align: center;
        }
        
        body {
            font-size: 12px;
        }
        
        #dome {
            width: 200px;
            height: 250px;
            margin: 50px auto;
            overflow: hidden;
            border: 2px solid #87ceeb;
        }
        
        #dome li {
            line-height: 24px;
            border-bottom: 1px solid pink;
        }
    </style>

    <body>
        <div id="dome">
            <div id="dome1">
                <ul>
                    <li>佐仓绫音</li>
                    <li>钉宫理惠</li>
                    <li>花泽香菜</li>
                    <li>早见沙织</li>
                    <li>茅野爱衣</li>
                    <li>雨宫天</li>
                    <li>松户遥</li>
                    <li>悠木碧</li>
                    <li>水濑祈</li>
                    <li>泽城美雪</li>
                </ul>
            </div>
            <div id="dome2"></div>
        </div>
    </body>
    <script type="text/javascript">
        var dome;
        var timer;
        window.onload = function() {

            dome = document.getElementById("dome");
            var dome1 = document.getElementById("dome1");
            var dome2 = document.getElementById("dome2");

            dome1.style.height = dome.offsetHeight + "px";
            dome2.style.height = dome.offsetHeight + "px";

            dome2.innerHTML = dome1.innerHTML;

            dome.onmouseover = function() {

                window.clearInterval(timer);
            }
            dome.onmouseout = function() {
                timer = window.setInterval("start2()", 40);
            }

            timer = window.setInterval("start2()", 40);
        }

        function start2() {

            if (dome.scrollTop == dome.offsetHeight) {
                dome.scrollTop = 0;
            } else {
                dome.scrollTop++;
            }
        }
    </script>
</head>


</html>